fashion-ssr-vue3/pages/product/[id].vue

<!-- @format -->

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { getGoodsDetailApi } from '~/api/model/goods'
import { getBrandDetailApi } from '~/api/model/brand'
import { ConstKeys } from '~/enums/const-enums'
import { useUserStore } from '@/stores/modules/user'

const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)
const route = useRoute()
const brandInfo = ref<any>()
const goodsDetail = ref<any>()
const crumbs = ref<any>([{ name: 'Home', url: '/' }])
const quantityVisible = ref<boolean>(false)
const inquireVisible = ref<boolean>(false)

const id = route.params.id

const { data, pending, error, refresh } = await useAsyncData(
  'brand-detail',
  () =>
    $fetch(`${ConstKeys.DOMAINPRO}/client/merchandise/detail`, {
      params: { id },
    }),
)
const seoData = data.value?.result

useHead({
  title: `Wholesale ${seoData?.merchandiseEnglishName} | EJET Selection`,
  meta: [
    {
      name: 'description',
      content: `Discover detailed information about premium wholesale products from trusted Chinese suppliers. Make informed decisions for your store with EJET Selection.`,
    },
    {
      property: 'og:title',
      content: `Wholesale ${seoData?.merchandiseEnglishName} | EJET Selection`,
    },
    {
      property: 'og:description',
      content: `Discover detailed information about premium wholesale products from trusted Chinese suppliers. Make informed decisions for your store with EJET Selection.`,
    },
    {
      property: 'og:type',
      content: 'website',
    },
    {
      property: 'twitter:title',
      content: `Wholesale ${seoData?.merchandiseEnglishName} | EJET Selection`,
    },
    {
      property: 'twitter:description',
      content: `Discover detailed information about premium wholesale products from trusted Chinese suppliers. Make informed decisions for your store with EJET Selection.`,
    },
    {
      property: 'twitter:card',
      content: 'summary_large_image',
    },
  ],
  link: [
    {
      rel: 'canonical',
      href: `${ConstKeys.DOMAINPRO}/product/${id}`,
    },
  ],
})

watch(() => isLogin.value, (v: any) => {
  if (!v)
    goodsDetail.value.sellPrice = 0
})

function getImgList(data: any) {
  const list = []
  if (data.masterImage)
    list.push(...data.masterImage.split(','))
  if (data.detailImage)
    return list.concat(...data.detailImage.split(','))
  return list
}
async function getGoodsDetail() {
  try {
    const data: any = await getGoodsDetailApi({ id })
    const list = getImgList(data)
    data.goodsImgOrVideoList = [...list]
    goodsDetail.value = data
    data.affiliationBrandId && getBrandInfo(data.affiliationBrandId)
  }
  catch (error) {
    console.log(error)
  }
}
async function getBrandInfo(id) {
  const info = await getBrandDetailApi({ id })
  brandInfo.value = info
}

getGoodsDetail()
</script>

<template>
  <div class="">
    <div class="w-1400px mx-auto pt-40px pb-60px">
      <div class="fw-300">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item
            v-for="(item, index) in crumbs" :key="index"
            :to="!!item.url ? { path: item.url } : null"
          >
            {{ item.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="w-1400px mx-auto pb-50px flex">
      <business-goods-left :data="goodsDetail" />
      <business-goods-right :data="goodsDetail" @inquire="inquireVisible = true" @update:data="getGoodsDetail" @add-to-cart="quantityVisible = true" />
    </div>
    <div class="w-1400px mx-auto pb-100px  ">
      <business-goods-attribute :data="goodsDetail" />
    </div>
    <business-goods-more-from-brand :brand-id="brandInfo?.id" :brand-info="brandInfo" />
    <business-goods-product-recommend :id="goodsDetail?.id" />
    <!-- <business-goods-similar-product :id="goodsDetail?.id" /> -->
    <business-goods-select-quantity v-if="quantityVisible" v-model:visible="quantityVisible" :data="goodsDetail" @update:data="getGoodsDetail" />
    <business-account-rfqs-quotation-modal v-if="inquireVisible" v-model:visible="inquireVisible" />
    <AppFooter />
  </div>
</template>

<style lang="less" scoped></style>